<template>
  <el-select
    :value="text"
    :clearable="clearable"
    @clear="handleClear"
    :disabled="disabled"
    ref="treeSelect"
    :filterable="filterable"
    :filter-method="hanldeFilter"
  >
    <el-option :value="text" :label="text" class="options">
      <el-tree
        id="tree-option"
        ref="selectTree"
        :accordion="accordion"
        :data="data"
        :props="defaultProps"
        :node-key="defaultProps.value"
        :default-expanded-keys="defaultExpandedKey"
        :default-expand-all="defaultExpand"
        @node-click="handleNodeClick"
        :class="optionClass"
        :expand-on-click-node="false"
        icon-class=""
        :filter-node-method="hanldeFilterNode"
      >
      </el-tree>
    </el-option>
  </el-select>
</template>

<script>
export default {
  name: "el-tree-select",
  data() {
    return {
      valueId: null,
      text: "",
      defaultExpandedKey: [],
    };
  },
  mounted() {
    (this.valueId = this.value), // 初始值
      this.initalize();
  },
  methods: {
    // 初始化值
    initalize() {
      if (this.data == null || this.data.length == 0) return;
      if (this.valueId) {
        let match = this.$refs.selectTree.getNode(this.valueId);
        if (match) {
          this.text = match.data[this.defaultProps.label];
        }

        this.$refs.selectTree.setCurrentKey(this.valueId); // 设置默认选中
        this.defaultExpandedKey = [this.valueId]; // 设置默认展开
      }else{
        this.text = "";
      }
      this.initalizeScroll();
    },
    initalizeScroll() {
      this.$nextTick(() => {
        let scrollWrap = document.querySelectorAll(
          ".el-scrollbar .el-select-dropdown__wrap"
        )[0];
        let scrollBar = document.querySelectorAll(
          ".el-scrollbar .el-scrollbar__bar"
        );
        scrollWrap.style.cssText =
          "margin: 0px; max-height: none; overflow: hidden;";
        scrollBar.forEach((ele) => (ele.style.width = 0));
      });
    },
    handleNodeClick(node) {
      if (this.onlyChild) {
        if (node.children && node.children.length > 0) {
          return;
        }
      }
      this.text = node[this.defaultProps.label];
      this.valueId = node[this.defaultProps.value];
      this.defaultExpandedKey = [];
      this.$emit("change", { id: this.valueId, node: node });
      this.$refs.treeSelect.blur();
    },
    handleClear() {
      this.text = "";
      this.valueId = null;
      this.defaultExpandedKey = [];
      this.clearSelected();
      this.$emit("change", {});
    },
    clearSelected() {
      let allNode = document.querySelectorAll("#tree-option .el-tree-node");
      allNode.forEach((element) => element.classList.remove("is-current"));
    },
    hanldeFilter(keyword) {
      this.$refs.selectTree.filter(keyword);
    },
    hanldeFilterNode(keyword, node) {
      if (!keyword) return true;

      return node.fullName.indexOf(keyword) > -1;
    },
  },
  watch: {
    value() {
      this.valueId = this.value;
      this.initalize();
    },
    data() {
      this.$nextTick(() => {
        this.initalize();
      });
    },
  },
  props: {
    defaultProps: {
      type: Object,
      default: () => ({
        value: "id", // ID字段名
        label: "name", // 显示名称
        children: "children", // 子级字段名
      }),
    },
    data: { type: Array, default: () => [] },
    value: { type: String, default: null },
    clearable: { type: Boolean, default: true },
    accordion: { type: Boolean, default: true },
    defaultExpand: { type: Boolean, default: true },
    disabled: { type: Boolean, default: false },
    optionClass: {
      type: String,
    },
    onlyChild: { type: Boolean, default: false },
    filterable: { type: Boolean, default: false },
  },
};
</script>

<style scoped>
.el-scrollbar .el-scrollbar__view .el-select-dropdown__item {
  height: auto;
  max-height: 274px;
  padding: 0;
  overflow: hidden;
  overflow-y: auto;
}
.el-select-dropdown__item.selected {
  font-weight: normal;
}
ul li >>> .el-tree .el-tree-node__content {
  height: auto;
  padding: 0 20px;
}
.el-tree-node__label {
  font-weight: normal;
}
.el-tree >>> .is-current .el-tree-node__label {
  color: #409eff;
  font-weight: 700;
}
.el-tree >>> .is-current .el-tree-node__children .el-tree-node__label {
  color: #606266;
  font-weight: normal;
}
</style>
